<script setup lang="ts">
import _ from 'lodash';
import {onBeforeMount, ref} from "vue";
import {getHotTag} from "@/api/tag/tag";
import {ECode, PagePath} from "@/util/commonUtil";
import {router} from "@/router";

const hotTagData = ref<any>([])
const typeList = ref(['pink', 'red', 'orange', 'green', 'cyan', 'blue', 'purple'])

onBeforeMount(() => {
  getHotTagList()
})

async function getHotTagList() {
  await getHotTag().then((response: any) => {
    if (response.code == ECode.SUCCESS) {
      hotTagData.value = response.data
    }
  })
}

function goToList(uid: any) {
  let routeData = router.resolve({path: PagePath.ResultsPath, query: {tagUid: uid}});
  window.open(routeData.href, '_blank');
}
</script>

<template>
  <section class="tagCloud rounded-xl">
    <a-card class="rounded-xl">
      <template #title>
        <span class="flex text-center w-full justify-center items-center">热门标签</span>
      </template>
      <ul class="hotTagBox flex overflow-hidden flex-wrap gap-4 w-full">
        <template v-for="item in hotTagData" :key="item.uid">
          <li class="cursor-pointer" @click="goToList(item.uid)">
            <a-tag :color="_.sample(typeList)">{{ item.content }}</a-tag>
          </li>
        </template>
      </ul>
    </a-card>
  </section>
</template>

<style scoped lang="less">
.tagCloud {
  border: thin solid rgb(203 213 225);
}

:deep(.ant-card-head) {
  border-bottom: none;
}
</style>
